<template>
  <div ref="bar" class="bar"></div>
</template>

<script>
//引入echarts
import * as echarts from "echarts";
export default {
  name: "",
  //组件挂载完毕:容器div挂载完毕，获取到真实DOM节点
  mounted() {
    let mycharts = echarts.init(this.$refs.bar);
    //配置项
    let option = {
      xAxis: {
        type: "category",
        show: false,
      },
      yAxis: {
        show: false,
      },
      //调整图形布局
      grid: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
      },
      //柱状图
      series: {
        type: "bar",
        data: [34, 27, 53, 22, 65, 49, 24],
        //调整颜色
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "black", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#eee", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        //显示柱状图标签
        label: {
          show: true,
        },
      },
      //提示框组件
      tooltip: {
        //限制提示组件在容器内显示
        confine: true,
        position: function (point, params, dom, rect, size) {
          // 固定在顶部
          return [point[0], "10%"];
        },
      },
    };
    //设置配置项
    mycharts.setOption(option);
    //图形图标自适应
    window.addEventListener("resize", () => {
      //图标自适应
      mycharts.resize();
    });
  },
};
</script>

<style scoped lang="scss">
.bar {
  width: 100%;
  height: 100%;
}
</style>
